<template>
    <div class="left-side">
      <div v-for="(section, index) in sections" :key="index" class="side-wrapper">
        <div class="side-title">{{ section.title }}</div>
        <div class="side-menu">
          <a v-for="(item, itemIndex) in section.items" :key="itemIndex" href="#">{{ item }}</a>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 定义数据
  const sections = ref([
    {
      title: 'Apps',
      items: ['All Apps', 'All Apps', 'All Apps', 'All Apps']
    },
    {
      title: 'Apps',
      items: ['All Apps', 'All Apps', 'All Apps', 'All Apps']
    },
    {
      title: 'New Section', // 新增的部分
      items: ['New Item 1', 'New Item 2', 'New Item 3', 'New Item 4']
    }
  ]);
  </script>
  <style>
  @import url(../css/side-menu.css);
</style>